<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
        <title></title>
        <!-- 引入 WeUI -->
        <link rel="stylesheet" href="//res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" />
        <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css" />

        <style type="text/css">
            body,html{
                height: 100%;
            }
            .container{
                height: 100%;
            }
        </style>
    </head>
    <body >
    <!-- body 顶部加上如下代码 -->
    <div class="weui-pull-to-refresh__layer">
        <div class='weui-pull-to-refresh__arrow'></div>
        <div class='weui-pull-to-refresh__preloader'></div>
        <div class="down">下拉刷新</div>
        <div class="up">释放刷新</div>
        <div class="refresh">正在刷新</div>
    </div>

            <div class="container" id="container">
                    <div class="page tabbar js_show" style="position:relative;height: 100%;">
                        <div class="page__bd" style="position:relative;height: 100%;">
                            <div class="weui-tab" >
                                <div class="weui-tab__panel">
                                    <div class="page__bd">
                                        <div class="weui-cells__title" style="text-align:center">设备基本信息</div>
                                        <div class="weui-cells">
                                            <div class="weui-cell">
                                                <div class="weui-cell__bd">
                                                    <p>设备名称</p>
                                                </div>
                                                <div id="deviceNameDiv" class="weui-cell__ft"></div>
                                            </div>
                                            <div class="weui-cell">
                                                <div class="weui-cell__bd">
                                                    <p>设备编号</p>
                                                </div>
                                                <div id="deviceIdDiv" class="weui-cell__ft"></div>
                                            </div>
                                            <div class="weui-cell">
                                                <div class="weui-cell__bd">
                                                    <p>设备状态</p>
                                                </div>
                                                <div  id="deviceStatusDiv" class="weui-cell__ft"></div>
                                            </div>
                                            <div class="weui-cell">
                                                <div class="weui-cell__bd">
                                                    <p>安防状态</p>
                                                </div>
                                                <div  id="defenseStatusDiv" class="weui-cell__ft"></div>
                                            </div>
                                            <div class="weui-cell">
                                                <div class="weui-cell__bd">
                                                    <p>剩余电量</p>
                                                </div>
                                                <div  id="deviceResidualQuantityDiv" class="weui-cell__ft"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="weui-tabbar" style="z-index:5;">
                                    <a href="javascript:;" class="weui-tabbar__item weui-bar__item_on" data-tab="firstTab">
                                        <span style="display: inline-block;position: relative;">
                                            <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon"/>
                                            <!--<span class="weui-badge" style="position: absolute;top: -2px;right: -13px;">8</span>-->
                                        </span>
                                        <p class="weui-tabbar__label">设备信息</p>
                                    </a>
                                    <a href="../deviceEvent" class="weui-tabbar__item" data-tab="secondTab">
                                        <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon"/>
                                        <p class="weui-tabbar__label">设备事件</p>
                                    </a>
                                    <a href="../deviceManage" class="weui-tabbar__item" data-tab="thirdTab">
                                        <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon"/>
                                        <p class="weui-tabbar__label">设备维护</p>
                                    </a>
                                    <a href="../remoteOpenDoor" class="weui-tabbar__item" data-tab="fourthTab">
                                        <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon"/>
                                        <p class="weui-tabbar__label">远程开锁</p>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
   </body>
   
    <script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){

            function getMyDevice(){
                //1 删除界面元素
                $("#deviceList").empty();
                //2 查出数据
                $.ajax({
                    type: "get",
                    url: "/myDevice",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        if (data.success == "true") {
                            var device = data.data;
                            if (device != null) {
                                $("#deviceNameDiv").html(device.name != null ? device.name : "");
                                $("#deviceIdDiv").html(device.deviceId != null ? device.deviceId : "");
                                var now = new Date();
                                if (device.heartTime != null && device.heartTime > (now.getTime() - 3600000 * 12) ) {
                                    $("#deviceStatusDiv").html("在线");
                                } else {
                                    $("#deviceStatusDiv").html("离线");
                                }
                                if (device.defenseStatus != null && device.defenseStatus == 1 ) {
                                    $("#defenseStatusDiv").html("布防");
                                } else {
                                    $("#defenseStatusDiv").html("撤防");
                                }

                                $("#deviceResidualQuantityDiv").html(device.power != null ? device.power : "");
                            }
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        var responseData = JSON.parse(XMLHttpRequest.responseText);
                        alert(responseData.exceptionObj.message);
                    }
                });
            }

            getMyDevice();

            //下拉刷新
            $(document.body).pullToRefresh(function () {
                getMyDevice();
                $(document.body).pullToRefreshDone();
            });

        });
    </script>
</html>
